<template>
  <el-dialog
    :title="dialogTitle"
    v-model="visible"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      class="dict-form"
    >
      <el-form-item label="字典名称" prop="dictName">
        <el-input
          v-model="formData.dictName"
          placeholder="请输入字典名称"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input
          v-model="formData.dictType"
          placeholder="请输入字典类型"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入内容"
          :rows="3"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import type { DictTypeForm } from '@/types/dict'
import { dictTypeApi } from '@/api/dict'
import { convertKeysToSnakeCase } from '@/utils/caseConverter'

interface Props {
  visible: boolean
  type: 'add' | 'edit'
  formData: DictTypeForm
}



interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = defineProps<Props>()



const emit = defineEmits<Emits>()

const formRef = ref<FormInstance>()
const loading = ref(false)

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const dialogTitle = computed(() => {
  return props.type === 'add' ? '添加字典类型' : '修改字典类型'
})

// 表单验证规则
const rules = reactive<FormRules>({
  dictName: [
    { required: true, message: '字典名称不能为空', trigger: 'blur' }
  ],
  dictType: [
    { required: true, message: '字典类型不能为空', trigger: 'blur' }
  ]
})

// 方法
const handleSubmit = async () => {
  if (!formRef.value) return

  const valid = await formRef.value.validate()
  if (!valid) return

  loading.value = true
  try {
    if (props.type === 'add') {
      let json = convertKeysToSnakeCase(formData.value)
      const result = await dictTypeApi.add(json)
      if(result.code!=200){
        ElMessage.error(result.message)
      }else{
        ElMessage.success('新增成功')
        emit('success')
      }
    } else {
      let json = convertKeysToSnakeCase(formData.value)
      //移除json里的time
      delete json.create_time
      delete json.update_time
      const result = await dictTypeApi.update(json)
      if(result.code!=200){
        ElMessage.error(result.message)
      }else{
        ElMessage.success('修改成功')
        emit('success')
      }
    }
  } catch (error:any) {
    console.error('操作失败:', error)
    if(error.code == 500||error.code == 400){
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

// 使用 computed 来确保响应式
const formData = computed(() => props.formData)

</script>

<style scoped lang="scss">
.dict-form {
  padding: 20px 20px 0 0;
}

.dialog-footer {
  text-align: right;
}
</style>